<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="订单详情"
    :showCancelBtn="true" :showOkBtn="false" :canFullscreen="false" :centered="true"
    :width="820" :loading="loading" wrapClassName="order-detail"
    :bodyStyle="{height:'calc(100vh - 250px)', overflowY:'hidden'}"
  >
    <div style="zoom: 1; min-width:800px; padding: 0 10px 10px; margin-top: 10px;">
      <div class="orderInfo">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w100 font-bold text-lg">订单信息</span>
          <span class="float-right h-30px leading-30px font-12" >
            订单编号：{{business.id}}
          </span>
          <span class="float-right w500 alert-tip" style="display: none"></span>
        </div>
        <table class="orderTable orderTableAlign" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-60px">部门</th>
            <td class="w-180px"><div id="_region">{{business.region}}</div></td>
            <th class="w-60px">签单员</th>
            <td class="w-180px"><div id="_soleId">{{business.sole_id}}</div></td>
          </tr>
          <tr class="h-35px"> 
            <th>车商名称</th>
            <td><div id="_dealerName">{{business.dealerName}}</div></td>
            <th>客户名字</th>
            <td><div id="_customerName">{{business.customerName}}</div></td>
          </tr>
          <tr class="h-35px">
            <th>融资总额</th>
            <td><div id="_dealerRebate">{{business.amountTotal}}</div></td>
            <th>放款日期</th>
            <td><div id="_ygs" class="font-500">{{business.loanDate}}</div></td>
          </tr>
          <tr class="h-35px">
            <th>车商返利</th>
            <td><div id="_dealerRebate">{{business.dealerRebate}}</div></td>
            <th>返利系数</th>
            <td><div id="_ygs" class="font-500">{{business.rebateRatio}}</div></td>
          </tr>
          <tr class="h-35px">
            <th class="w-60px">备注</th>
            <td class="tdLeft" colspan="4">
              {{business.remarks}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="orderInfo">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w100 font-bold text-lg">利润信息</span>
          <span class="float-right h-30px leading-30px font-12" >
              产品编号：{{business.customerId}}
            </span>
          <span class="float-right w500 alert-tip" style="display: none"></span>
        </div>
        <table class="orderTable orderTableAlign" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-60px">区域毛利</th>
            <td class="w-180px"><div id="_region">{{business.zfProfitGross}}</div></td>
            <th class="w-60px">区域提成</th>
            <td class="w-180px"><div id="_soleId">{{business.qyProfitAmount}}</div></td>
          </tr>
          <tr class="h-35px"> 
            <th>税金支出</th>
            <td><div id="_dealerName">{{business.zfTaxAmount}}</div></td>
            <th><div v-if="hasPermission('order:shareholder')">股东毛利</div></th>
            <td><div id="_customerName" v-if="hasPermission('order:shareholder')">{{business.nbProfitGross}}</div></td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="listtab1" id="con_menu_1" style="display: block;">
        <form id="bucForm" action="" method="post">
          <div class="theadSticky">
            <span class="float-left h-30px leading-30px w20 font-bold text-lg">政策信息</span>
            <span class="float-right h-30px leading-30px text-16px font-12">
              产品名称：{{business.customerPath}}
            </span>
          </div>
          <table class="orderTable" id="buctable">
            <tbody>
            <tr class="listBg">
              <th width="20"></th>
              <th width="70">类型</th>
              <th width="30" class="tac">期数</th>
              <th width="50" class="tac">利率</th>
              <th width="50" class="tac">税率</th>
              <th width="50" class="tar">奖励合计</th>
              <th width="50" class="tac">GPS</th>
              <th width="50" class="tar">其它费用</th>
            </tr>
            </tbody>
            <tbody>
            <template v-for="(list, index) in policys" :key="index">
            <tr :class="(index%2==0) ? 'listBg' : 'cor'" v-if="list.policy_type != '1' || hasPermission('order:shareholder')">
              <td>{{Number(index)+1}}</td>
              <td class="text-red-500">{{list.policy_name}}</td>
              <td>{{list.time_limit}}</td>
              <td>{{list.rate}}</td>
              <td>{{list.tax_ratio ? list.tax_ratio : '0.00%'}}</td>
              <td class="text-blue-500">{{list.total_rewards}}</td>
              <td class="text-red-500">{{list.gps}}</td>
              <td class="text-green-500">{{list.other_amount}}</td>
            </tr>
            <tr>
              <td colspan="8">
              <!--3区域政策-->
              <p v-if="list.policy_type == '3'">
                <p><span class="text-red-600">区域奖励</span>  = <span class="w200px text-red-600">融资总额 × 政策利率 </span> = <span class="w200px text-red-600 ml-10px ml-10px">{{business.amountTotal}} × {{list.total_rewards}} </span> = <span class="w80px text-right text-red-600">{{list.income_amount}}</span></p>
                <p><span class="text-green-600">区域支出</span>  = <span class="w200px text-green-600">车商返利 + 区域GPS + 其它费用</span> = <span class="w200px text-green-600 ml-10px">{{business.dealerRebate}} + {{list.gps}} + {{list.other_amount}}</span> = <span class="w80px text-green-600 text-right">{{list.pay_amount}}</span></p>
                <p><span class="text-blue-600">区域提成</span>  = <span class="w200px text-blue-600">区域奖励 - 区域支出</span> = <span class="w200px text-blue-600 ml-10px">{{list.income_amount}} - {{list.pay_amount}}</span> = <span class="w80px text-blue-600 text-right">{{list.profit_amount}}</span></p>
              </p>
              <!--2资方政策-->
              <p v-if="list.policy_type == '2'">
                <p><span class="text-red-600">资方奖励</span> = <span class="w200px text-red-600">融资总额 × 政策利率</span> = <span class="w200px text-red-600 ml-10px">{{business.amountTotal}} × {{list.total_rewards}}</span> = <span class="w80px text-right text-red-600">{{list.income_amount}}</span></p>
                <p><span class="text-green-600">资方税金</span> = <span class="w200px text-green-600">资方奖励 × 税率</span> = <span class="w200px text-green-600 ml-10px">{{list.income_amount}} × {{list.tax_ratio ? list.tax_ratio : '0.00%'}}</span> = <span class="w80px text-green-600 text-right">{{list.tax_amount}}</span></p>
                <p><span class="text-green-600">资方支出</span> = <span class="w200px text-green-600">资方税金 + 资方GPS + 其它费用</span> = <span class="w200px text-green-600 ml-10px">{{list.tax_amount}} + {{list.gps}} + {{list.other_amount}}</span> = <span class="w80px text-green-600 text-right">{{list.pay_amount}}</span></p>
                <p><span class="text-blue-600">区域营收</span> = <span class="w200px text-blue-600">资方奖励 - 资方支出</span> = <span class="w200px text-blue-600 ml-10px">{{list.income_amount}} - {{list.pay_amount}}</span> = <span class="w80px text-blue-600 text-right">{{list.profit_amount}}</span></p>
                <p><span class="text-blue-600">区域毛利</span> = <span class="w200px text-blue-600">区域营收 - 区域奖励 + 区域GPS</span> = <span class="w200px text-blue-600 ml-10px">{{list.profit_amount}} - {{business.qyIncomeAmount}} + {{business.qyGPS}}</span> = <span class="w80px text-blue-600 text-right">{{business.zfProfitGross}}</span></p>
              </p>
              <!--3内部政策-->
              <p v-if="list.policy_type == '1' && hasPermission('order:shareholder')">
                <p><span class="text-red-600">股东奖励</span> = <span class="w200px text-red-600">融资总额 × 政策利率</span> = <span class="w200px text-red-600 ml-10px">{{business.amountTotal}} × {{list.total_rewards}}</span> = <span class="w80px text-red-600 text-right">{{list.income_amount}}</span></p>
                <p><span class="text-green-600">股东税金</span> = <span class="w200px text-green-600">股东奖励 × 税率</span> = <span class="w200px text-green-600 ml-10px">{{list.income_amount}} × {{list.tax_ratio ? list.tax_ratio : '0.00%'}}</span> = <span class="w80px text-green-600 text-right">{{list.tax_amount}}</span></p>
                <p><span class="text-green-600">股东支出</span> = <span class="w200px text-green-600">股东税金 + 股东GPS + 其它费用 </span> = <span class="w200px text-green-600 ml-10px">{{list.tax_amount}} + {{list.gps}} + {{list.other_amount}}</span> = <span class="w80px text-green-600 text-right">{{list.pay_amount}}</span></p>
                <p><span class="text-blue-600">股东营收</span> = <span class="w200px text-blue-600">股东奖励 - 股东支出</span> = <span class="w200px text-blue-600 ml-10px">{{list.income_amount}} - {{list.pay_amount}}</span> = <span class="w80px text-right text-blue-600">{{list.profit_amount}}</span></p>
                <p><span class="text-blue-600">股东毛利</span> = <span class="w200px text-blue-600">股东营收 - 区域奖励 + 区域GPS</span> = <span class="w200px text-blue-600 ml-10px">{{list.profit_amount}} - {{business.qyIncomeAmount}} + {{business.qyGPS}}</span> = <span class="w80px text-blue-600 text-right">{{business.nbProfitGross}}</span></p>
              </p>
              </td>
            </tr>
            </template>
            </tbody>
          </table>
        </form>
      </div>

    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { detail } from '../Orders.api';
  import { useMessage } from "/@/hooks/web/useMessage";
  import { usePermission } from '/@/hooks/web/usePermission';

  const { hasPermission } = usePermission();

  let loading     = ref(false);
  let $businessId = ref('');
  let business    = reactive<any>({});
  let policys     = reactive<any>({});

  const { createMessage: $message } = useMessage();

  // Emits声明
  const emit = defineEmits(['register', 'success']);

  const isUpdate = ref(true);

  //TODO ------界面初始化---加载数据 -> 根据数据初始表单-------------
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    // setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    // isUpdate.value = !!data?.isUpdate;

    init(data.record.id);
    
  });

  function init(id) {
    if (!id) {
      $message.error("操作失败：订单编号为空!");
      return;
    }
    $businessId.value = id;
    orderTable()
  }

  //订单界面所有信息
  async function orderTable() {
    business = reactive({});
    policys  = reactive({});

    loading.value = true;
    var params = { id: $businessId.value };
    await detail(params).then((res) => {
      try {
        if (res.success != true) {
          $message.warning(res.message);
          return false;
        }
        let result = res.result;
        //1、业务数据 - 初始化
        Object.assign(business, result.orders);
        Object.assign(policys, result.policys);

      } catch (e) {
        alert(e);
        return false;
      }
    }).finally(() => {
      loading.value = false;
    });
  }
</script>

<style lang="less" scoped>
@import "../order.css";
// newCode：新代码改为
body,html {
  width: 100%;
  min-height: 100vh;
}
.orderTable .ant-form-item {
  margin-bottom: 0px;
}

.theadSticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 10;

  padding:6px 4px;
  background:#fff;
  border: 1px solid #d6dde7;
  height: 42px;
  line-height: 30px;
  margin-bottom: -1px;
  font-size: 16px;
}

td p {
  text-align: left;
  span {
    display:inline-block;
  }
}
</style>